import React, { useState } from "react";
import styles from "./index.module.scss";
import { Image, Input, Button, Toast } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import {  ApiRegister } from "@/utils/api";
import { useNavigate } from "react-router-dom";
import { useAppDispatch } from "@/hooks";
type Props = {};

interface IMyResponseData extends IResponseData {
  data:string
}

export default function index({}: Props) {
  const dispatch = useAppDispatch();
  //手机号码
  const [phoneValue, setPhoneValue] = useState<string>("13588888888");
  //   密码
  const [passwordValue, setPasswordValue] = useState<string>("wolfcode123");
  //是否显示密码
  const [visible, setVisible] = useState(false);
  //路由跳转
  const navigate = useNavigate();

  //注册按钮
  const registerBtn = async () => {
    let res:IMyResponseData;
    try {
      res = await ApiRegister({
        nickName:"",
        phone: phoneValue,
        password: passwordValue,
      });
    } catch (err: any) {
      let ret = err.response.data;
      if (ret.message) {
        Toast.show({
          icon: "fail",
          content: ret.message,
        });
        return;
      } else {
        Toast.show({
          icon: "fail",
          content: "系统发生错误，请联系管理员！",
        });
        return;
      }
    }
    //成功提示
    Toast.show({
      icon:"success",
      content:"注册成功",
      duration:2000
    })
    //跳转到用户中心
    setTimeout(()=>{
      navigate("/login");
    },2000)
    
    
  };
  return (
    <div className={styles.qd_login_page}>
      {/* log图标 */}
      <div className="qd_login_img_area">
        <Image src="./images/logo.png" fit="fill" />
      </div>
      {/* 标题 */}
      <div className="qd_login_title">Register Page</div>
      {/* 登录 */}
      <div className="qd_login_area">
        <div className="qd_login_phone">
          <Input
            placeholder="请输入手机号码"
            value={phoneValue}
            onChange={(val) => {
              setPhoneValue(val);
            }}
          />
        </div>
        <div className="qd_login_password qd_login_phone">
          <Input
            className={styles.input}
            placeholder="请输入密码"
            value={passwordValue}
            onChange={(val) => {
              setPasswordValue(val);
            }}
            type={visible ? "text" : "password"}
          />
          <div className={styles.eye}>
            {!visible ? (
              <EyeInvisibleOutline onClick={() => setVisible(true)} />
            ) : (
              <EyeOutline onClick={() => setVisible(false)} />
            )}
          </div>
        </div>
        <div className="qd_login_btn">
          <Button block color="primary" size="large" onClick={registerBtn}>
            立即注册
          </Button>
        </div>
        <div className="qd_login_go_area">
          <div className="qd_login_go_register" onClick={()=>navigate("/login")}>直接登录</div>
        </div>
        <div className="qd_login_author">Copyright © 前端小棋 2022</div>
      </div>
    </div>
  );
}
